<template>
    <div>
        <van-search v-model="value" show-action label="地址" placeholder="请输入搜索关键词" @search="onSearch">
            <template #action>
                <div @click="onClickButton">搜索</div>
            </template>
        </van-search>
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in images" :key="image">
                <img :src="image" style="width: 350px;" />
            </van-swipe-item>
        </van-swipe>
        <van-grid :column-num="3">
            <van-grid-item v-for="value in 6" :key="value" icon="photo-o" text="文字" />
        </van-grid>
        <div class="pbl">
            <div style="width: 100%;height: 200px;"><img style="width: 100%;height: 200px;" src="./img/image.png"
                    alt=""></div>
            <div style="width: 100%;height: 250px;background: blue;"><img style="width: 100%;height: 250px;"
                    src="./img/image.png" alt=""></div>
            <div style="width: 100%;height: 100px;"><img style="width: 100%;height: 100px;" src="./img/image.png"
                    alt=""></div>
            <div style="width: 100%;height: 150px;background: blue;"><img style="width: 100%;height: 150px;"
                    src="./img/image.png" alt=""></div>
            <div style="width: 100%;height: 250px;background: blue;"><img style="width: 100%;height: 250px;"
                    src="./img/image.png" alt=""></div>
            <div style="width: 100%;height: 100px;background: blue;"><img style="width: 100%;height: 100px;"
                    src="./img/image.png" alt=""></div>
        </div>
    </div>
</template>

<script setup>
import router from '@/router';

const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
];
const onSearch = () => {
    router.push('/search')
}
</script>

<style>
.pbl {
    column-count: 2;
    column-gap: 25px;

    div {
        display: inline-block;
    }
}
</style>